<<<<<<< HEAD
/*
 *@description:订单管理
 *@Author:@reynold
 *@Date:2025-03-22 11:05:03
 *@Update:2025-03-22 11:05:03
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="tab_box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="first">
          <!-- 表格 -->
          <el-table :data="data.tableData" style="width: 100%">
            <el-table-column
              v-for="(item, index) in data.tableHeader" :key="item" :label="item" :prop="index">
              <template slot-scope="scope">
                {{scope.status}}
                <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status == '待派单' && item =='状态'">待派单</el-tag>
                <el-tag type="warning" size="mini" effect="dark" v-else-if="scope.row.status =='待接单'&& item =='状态'">待接单</el-tag>
                <span v-else>{{scope.row[index]}}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button class="columnBtn1" type="text" size="small" @click="showOrder(scope.row)" >详情</el-button>
                <el-button class="columnBtn2" type="text" size="small" @click="sendOrder(scope.row)" v-if="scope.row.status == '待派单'">派单</el-button>
                <el-button class="columnBtn3" type="text" size="small" @click="resetOrder(scope.row)" v-else>取消派单</el-button>
              </template>
            </el-table-column>
          </el-table>
          
            <!-- 分页 -->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="待支付" name="second">
        </el-tab-pane>
        <el-tab-pane label="待派单" name="third">
        </el-tab-pane>
        <el-tab-pane label="待接单" name="fourth">
        </el-tab-pane>
        <el-tab-pane label="待服务" name="fifth">
        </el-tab-pane>
        <el-tab-pane label="待确认" name="six"> 
        </el-tab-pane>
        <el-tab-pane label="已完成" name="seventh">
        </el-tab-pane>
      </el-tabs>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
// import Tabpan from './tabPaneItem.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return {
      pageQuery:{
        pageSize:10,
        pageNum:1
      },
      total:100,
      currentPage: 4,
      activeName:'first',
      data:{
        tableHeader:{orderNum:'订单编号',orderTime:'下单时间',price:'总价',status:'状态',customId:'顾客ID',employeeId:'员工ID'},
        tableData:[
          {
            orderNum:'1231',
            orderTime: '2016-05-02',
            price:1230,
            status:'待派单',
            customId:'456',
            employeeId:'987'
          }
        ]
      }
    }
  },
  methods:{
    handleSizeChange(val) {
      this.pageQuery = {
        pageNum:1,
        pageSize:10
      }
      this.pageQuery.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageQuery = {
        pageNum:1,
        pageSize:10
      }
      this.pageQuery.pageNum = val
      this.getOrderList()
    },
    handleClick(tab, event) {
      this.data = {}
      if(tab.name == 'first'){
        console.log('first');
        this.getOrderList()
      }
    },
    // 获取所有订单数据
    getOrderList(){
      instance.post('/order/list',this.pageQuery).then(res=>{
        this.data = res.data.data.list
        this.total = res.data.data.total
      })
    },
    // 查看订单详情
    showOrder(scope){
      console.log(scope);
    },
    // 派单的方法
    sendOrder(scope){
      console.log('派单');
      instance.post('/order/sendOrder',scope.id).then(res=>{
        this.getOrderList()
        utils.showSuccess(res.data.message)
      })
    },
    // 取消派单
    resetOrder(scope){
      console.log('取消派单');
      instance.post('/order/resetOrder',scope.id).then(res=>{
        this.getOrderList()
        utils.showSuccess(res.data.message)
      })
    }
  },
  components:{
    Card
  },
  created(){
    this.getOrderList()
  }
}
</script>

<style lang="less" scoped>
.tab_box {
  /deep/ .el-tabs__item.is-active {
    color:#188b8f;
  }
  /deep/ .el-tabs__active-bar{
    background-color: #188b8f;
  }
=======
<template>
  <div class="container">
    <div class="header">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="所有订单" name="all"></el-tab-pane>
        <el-tab-pane label="待支付" name="pendingPayment"></el-tab-pane>
        <el-tab-pane label="待派单" name="pendingAssignment"></el-tab-pane>
        <el-tab-pane label="待接单" name="pendingAcceptance"></el-tab-pane>
        <el-tab-pane label="待服务" name="pendingService"></el-tab-pane>
        <el-tab-pane label="待确认" name="pendingConfirmation"></el-tab-pane>
        <el-tab-pane label="已完成" name="completed"></el-tab-pane>
      </el-tabs>
    </div>
    
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#333' }"
    >
      <el-table-column prop="orderNumber" label="订单编号" width="120"></el-table-column>
      <el-table-column prop="orderDate" label="下单时间" width="150"></el-table-column>
      <el-table-column prop="totalPrice" label="总价" width="100"></el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 'pendingPayment'" type="warning">待支付</el-tag>
          <el-tag v-else-if="scope.row.status === 'pendingAssignment'" type="info">待派单</el-tag>
          <el-tag v-else-if="scope.row.status === 'pendingAcceptance'" type="primary">待接单</el-tag>
          <el-tag v-else-if="scope.row.status === 'pendingService'" type="success">待服务</el-tag>
          <el-tag v-else-if="scope.row.status === 'pendingConfirmation'" type="warning">待确认</el-tag>
          <el-tag v-else-if="scope.row.status === 'completed'" type="success">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" width="100"></el-table-column>
      <el-table-column prop="employeeId" label="员工ID" width="100"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDetails(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="handleInvoice(scope.$index, scope.row)">发票</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="detailsDialogVisible" width="60%">
      <el-descriptions title="订单信息" :column="2" border>
        <el-descriptions-item label="订单编号">{{ currentOrder.orderNumber }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ currentOrder.orderDate }}</el-descriptions-item>
        <el-descriptions-item label="总价">{{ currentOrder.totalPrice }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="currentOrder.status === 'pendingPayment'" type="warning">待支付</el-tag>
          <el-tag v-else-if="currentOrder.status === 'pendingAssignment'" type="info">待派单</el-tag>
          <el-tag v-else-if="currentOrder.status === 'pendingAcceptance'" type="primary">待接单</el-tag>
          <el-tag v-else-if="currentOrder.status === 'pendingService'" type="success">待服务</el-tag>
          <el-tag v-else-if="currentOrder.status === 'pendingConfirmation'" type="warning">待确认</el-tag>
          <el-tag v-else-if="currentOrder.status === 'completed'" type="success">已完成</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="顾客ID">{{ currentOrder.customerId }}</el-descriptions-item>
        <el-descriptions-item label="员工ID">{{ currentOrder.employeeId }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 发票对话框 -->
    <el-dialog title="发票信息" :visible.sync="invoiceDialogVisible" width="40%">
      <el-form :model="invoiceForm" label-width="100px">
        <el-form-item label="发票类型">
          <el-select v-model="invoiceForm.type">
            <el-option label="电子发票" value="electronic"></el-option>
            <el-option label="纸质发票" value="paper"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票抬头">
          <el-input v-model="invoiceForm.title"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input v-model="invoiceForm.taxNumber"></el-input>
        </el-form-item>
        <el-form-item label="邮寄地址">
          <el-input v-model="invoiceForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="invoiceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmInvoice">生成发票</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      activeTab: 'all',
      detailsDialogVisible: false,
      invoiceDialogVisible: false,
      currentOrder: {},
      invoiceForm: {
        type: 'electronic',
        title: '',
        taxNumber: '',
        address: ''
      }
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 从 localStorage 加载数据
      const savedData = localStorage.getItem('orderData');
      if (savedData) {
        this.tableData = JSON.parse(savedData);
      } else {
        // 默认数据
        this.tableData = [
          {
            orderNumber: "1231",
            orderDate: "2023-04-01",
            totalPrice: 1230,
            status: "pendingAssignment",
            customerId: "456",
            employeeId: "987"
          },
          {
            orderNumber: "1232",
            orderDate: "2023-04-02",
            totalPrice: 850,
            status: "pendingPayment",
            customerId: "457",
            employeeId: "988"
          },
          {
            orderNumber: "1233",
            orderDate: "2023-04-03",
            totalPrice: 1500,
            status: "pendingService",
            customerId: "458",
            employeeId: "989"
          },
          {
            orderNumber: "1234",
            orderDate: "2023-04-04",
            totalPrice: 2000,
            status: "completed",
            customerId: "459",
            employeeId: "990"
          }
        ];
        localStorage.setItem('orderData', JSON.stringify(this.tableData));
      }
      this.total = this.tableData.length;
    },
    handleTabClick(tab) {
      this.activeTab = tab.name;
      this.filterData();
    },
    filterData() {
      if (this.activeTab === 'all') {
        this.tableData = JSON.parse(localStorage.getItem('orderData'));
      } else {
        this.tableData = JSON.parse(localStorage.getItem('orderData')).filter(item => {
          return item.status === this.activeTab;
        });
      }
      this.total = this.tableData.length;
    },
    handleDetails(index, row) {
      this.currentOrder = row;
      this.detailsDialogVisible = true;
    },
    handleInvoice(index, row) {
      this.currentOrder = row;
      this.invoiceDialogVisible = true;
    },
    confirmInvoice() {
      this.invoiceDialogVisible = false;
      this.$message.success('发票生成成功');
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
>>>>>>> 76b7211 (提交)
}
</style>